<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About AceHub - Innovative Online Education Platform</title>
    <link rel="stylesheet" href="about.css">
    <link rel="stylesheet" href="../header-footer/common.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="shortcut icon" href="../header-footer/images/ico.jpg" type="image/x-icon">
</head>

<body>
    <!-- 页眉 -->
    <header class="navbar">
        <div class="nav">
            <div class="logo">
                <a href="../Homepage/WebsiteHomepage.html"><img src="../header-footer/images/logo.jpg" alt="AceHub"></a>
            </div>
            <nav>
                <ul>
                    <li><a href="../Homepage/WebsiteHomepage.html">home page</a></li>
                    <li><a href="./courseList.html">course</a></li>
                    <li><a href="./league.html">Alliance colleges</a></li>
                    <li><a href="./about-us.html">About Us</a></li>
                </ul>
            </nav>
        </div>
        <div class="search-box">
            <input type="text" id="searchInput" placeholder="Search for ">
            <button type="button" id="searchButton"><i class="fas fa-search"></i></button>
        </div>
        <div class="info">
            <!-- 用户信息将由JavaScript动态生成 -->
        </div>
    </header>

    <!-- 主内容区 -->
    <main>
        <!-- 英雄区域 -->
        <section class="hero-section">
            <div class="hero-overlay"></div>
            <div class="hero-content">
                <h1>About AceHub</h1>
                <p>Educational Innovation, Knowledge Sharing, and Setting Sail for the Future</p>
            </div>
            <div class="scroll-down">
                <i class="fas fa-chevron-down"></i>
            </div>
        </section>

        <!-- 关于内容 -->
         <div class="back">
        <div class="about-container">
            <!-- 使命愿景部分 -->
            <section class="mission-section">
                <div class="section-header">
                    <h2>ours<span>mission</span></h2>
                    <div class="divider"></div>
                </div>
                <div class="mission-content">
                    <div class="mission-card">
                        <div class="icon-box">
                            <i class="fas fa-balance-scale"></i> <!-- 教育平等 -->
                        </div>
                        <h3>educational equality</h3>
                        <p>Breaking geographical restrictions and making high-quality educational resources within reach ..</p>
                    </div>
                    
                    <div class="mission-card">
                        <div class="icon-box">
                            <i class="fas fa-atom"></i> <!-- 创新驱动 -->
                        </div>
                        <h3>innovation driven</h3>
                        <p>Reshaping the learning experience through technological innovation ..</p>
                    </div>
                    
                    <div class="mission-card">
                        <div class="icon-box">
                            <i class="fas fa-hands-helping"></i> <!-- 全球连接 -->
                        </div>
                        <h3>global connectivity</h3>
                        <p>Building a global learning community ..</p>
                    </div>
                </div>
            </section>

            <!-- 平台优势部分 -->
            <section class="advantages-section">
                <div class="section-header dark">
                    <h2>platform<span class="bold-text">advantage</span></h2>
                </div>
                <div class="advantages-grid">
                    <div class="advantage-item">
                        <div class="hexagon">
                            <i class="fas fa-graduation-cap"></i> <!-- 海量课程 -->
                        </div>
                        <h3>Massive courses</h3>
                        <p>Over 10000 courses cover the entire field ..</p>
                    </div>
                    
                    <div class="advantage-item">
                        <div class="hexagon">
                            <i class="fas fa-university"></i> <!-- 名校名师 -->
                        </div>
                        <h3>Famous teachers from prestigious universities</h3>
                        <p>Over 200 partner universities ..</p>
                    </div>
                    
                    <div class="advantage-item">
                        <div class="hexagon">
                            <i class="fas fa-brain"></i> <!-- 智能学习 -->
                        </div>
                        <h3>Intelligent learning</h3>
                        <p>AI based personalized recommendation system ..</p>
                    </div>
                    
                    <div class="advantage-item">
                        <div class="hexagon">
                            <i class="fas fa-comments"></i> <!-- 互动社区 -->
                        </div>
                        <h3>Interactive Community</h3>
                        <p>An active community consisting of over 5 million students ..</p>
                    </div>
                </div>
            </section>

            <!-- 核心价值观 -->
            <section class="values-section">
                <div class="section-header dark">
                    <h2><span class="bold-text">Core values</span></h2>
                </div>
                <div class="values-container">
                    <div class="value-card">
                        <div class="value-icon">
                            <i class="fas fa-share-alt"></i> <!-- 开放共享 -->
                        </div>
                        <h3>Open sharing</h3>
                        <p>Knowledge knows no boundaries, promoting fair distribution of educational resources</p>
                    </div>
                    
                    <div class="value-card">
                        <div class="value-icon">
                            <i class="fas fa-flask"></i> <!-- 创新驱动 -->
                        </div>
                        <h3>innovation driven</h3>
                        <p>Continuously exploring educational technology innovation ..</p>
                    </div>
                    
                    <div class="value-card">
                        <div class="value-icon">
                            <i class="fas fa-medal"></i> <!-- 质量第一 -->
                        </div>
                        <h3>quality first</h3>
                        <p>Strictly control the quality of the course ..</p>
                    </div>
                    
                    <div class="value-card">
                        <div class="value-icon">
                            <i class="fas fa-user-graduate"></i> <!-- 用户至上 -->
                        </div>
                        <h3>User First</h3>
                        <p>Guided by user needs ..</p>
                    </div>
                </div>
            </section>
        </div>
    </div>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-logo">
                <a href="../Homepage/WebsiteHomepage.html"><img src="../header-footer/images/logo.jpg" alt="AceHub"></a>
            </div>
            <div class="footer-text">
                <nav class="footer-nav">
                    <ul>
                        <li><a href="./about.html">About Us</a></li>
                        <li><a href="./contact.html">Contact Us</a></li>
                        <li><a href="./privacy.html">Privacy Policy</a></li>
                        <li><a href="./terms.html">Term of service</a></li>
                    </ul>
                </nav>
                <div class="footer-info">
                    <p>&copy; 2025 AceHub reserves all rights</p>
                </div>
            </div>
        </div>
    </footer>

    <script src="../database.js"></script>
    <script src="../account/account.js"></script>
    <script src="../header-footer/navigation.js"></script>

    <script>
        window.onload = function () {
const userid = localStorage.getItem('token');
if (userid) {
const user = JSON.parse(localStorage.getItem(userid));
let profileUrl = '';
let profileName = '';
let accountUrl = '';
if (userid === 'admin') {
profileUrl = '../account/admin-profile.html';
ProfileName='Personal Center';
accountUrl = '../account/admin-profile.html';
} else if (userid === 'teacher') {
profileUrl = '../teacher/teacher-profile.html';
ProfileName='Personal Center';
accountUrl = '../account/teacher-setting.html';
} else {
profileUrl = '../student/student-profile.html';
ProfileName='My Learning';
accountUrl = '../account/student-setting.html';
}
document.querySelector('.info').innerHTML = `
                    <a href="${profileUrl}">
                        <img id="user-head" src="${user.avatar}" alt="用户头像"></a>
                    <div class="card">
                        <ul>
                            <li><a href="${profileUrl}">${profileName}</a></li>
                            <li><a href="${accountUrl}">Account Settings </a></li>
                            <li><a id="logout" href="#logout">Log Out</a></li>
                        </ul>
                    </div>
                `;
                document.getElementById('logout').addEventListener('click', () => {
                    localStorage.removeItem('token');
                    window.location.href = '../Homepage/WebsiteHomepage.html';
                });
            }
            else {
                document.querySelector('.info').innerHTML = `
                    <a href="../account/login.html"><button class="login">log on</button></a>
                    <a href="../account/register.html"><button class="register">register</button></a>
                `;
            }

            document.querySelector('.scroll-down').addEventListener('click', () => {
                window.scrollTo({
                    top: document.querySelector('.mission-section').offsetTop - 100,
                    behavior: 'smooth'
                });
            });
        }
    </script>
</body>

</html>